import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import {Button, Modal, Space} from 'antd';
import { useForm } from 'antd/es/form/Form';
import React from 'react';
import {CheckOutlined, UndoOutlined} from "@ant-design/icons";
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;
export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.RuleListItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = useForm();
  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };

  const onReset = () => {
    form.setFieldsValue({
      groupName: '',
      groupDesc: '',
    });
  };

  return (
    <Modal
      title={props.values.id ? '编辑部门信息' : '新建部门信息'}
      width="600px"
      destroyOnClose
      open={props.updateModalVisible}
      onCancel={props.onCancel}
      footer={null}
    >
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        initialValues={props.values}
        onFinish={props.onSubmit}
        onReset={onReset}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />重置</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />提交</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '部门名称必填！',
            },
          ]}
          width="md"
          name="groupName"
          placeholder="请输入部门名称"
          label="部门名称"
        />

        <ProFormTextArea
          width="md"
          name="groupDesc"
          placeholder="请输入部门说明"
          label="部门说明"
        />
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;
